<template>
  <transition>
    <div class="home animate__animated animate__slideInLeft">
      <div class="home-wapper">
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide
            class=""
            v-for="(cardListItem, index) in cardList"
            :key="index">
            <ul>
              <li
                v-for="(imgItem, index) in cardListItem.cardImgs"
                :key="index">
                <div class="card">
                  <div class="card-img">
                    <img :src="imgItem.imgUrl" class="image" />
                  </div>
                  <div class="card-title">
                    <div class="info">
                      <span>
                        <img src="../../assets/200.jpg" alt="" />
                      </span>
                      <span class="txt"> 蔚知蔚见 </span>
                    </div>
                    <div class="title-context">
                      <a>{{ imgItem.title }}</a>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </swiper-slide>
          <div
            class="swiper-pagination swiper-pagination-white"
            slot="pagination"
            onmouseover="this.click()"></div>
        </swiper>

        <my-menu :menuVal="menuVal" @click.native="jucode" />
      </div>
    </div>
  </transition>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import MyMenu from "@/components/MyBtnCompon.vue";

export default {
  name: "swiper-example-fade-effect",
  title: "Fade effect",
  components: {
    Swiper,
    SwiperSlide,
    MyMenu,
  },
  data() {
    return {
      menuVal: "查看更多游记",
      cardList: [
        {
          cardImgs: [
            {
              imgUrl: require("../../assets/480x320 (1).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (2).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (3).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (4).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (5).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (6).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (7).jpg"),
              title:
                "【悦球波波娃】画卷中的内蒙秋色——呼伦贝尔自驾（月亮天池、额尔古纳湿地、敖鲁古雅、阿尔山）独家小众景点分享",
            },
            {
              imgUrl: require("../../assets/480x320 (8).jpg"),
              title:
                "【遇见迪庆】云山的彼方，是被神眷顾的秘境天堂（雪山四部曲之贰）",
            },
          ],
        },
        {
          cardImgs: [
            {
              imgUrl: require("../../assets/480x320 (8).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (7).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (6).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (5).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (4).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (3).jpg"),
              title:
                "赴一场色彩斑斓、秋色似锦的盛宴（2021年9月乌兰布统:透风沟、蛤蟆坝、影视基地、天太永滩涂、扣啃脑……）",
            },
            {
              imgUrl: require("../../assets/480x320 (2).jpg"),
              title:
                "【悦球波波娃】画卷中的内蒙秋色——呼伦贝尔自驾（月亮天池、额尔古纳湿地、敖鲁古雅、阿尔山）独家小众景点分享",
            },
            {
              imgUrl: require("../../assets/480x320 (1).jpg"),
              title:
                "【遇见迪庆】云山的彼方，是被神眷顾的秘境天堂（雪山四部曲之贰）",
            },
          ],
        },
      ],
      swiperOption: {
        spaceBetween: 30,
        effect: "fade",
        delay: 1000,
        loop: true,
        loadPrevNext: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  methods: {
    jucode() {
      this.$api.aboutTest("queryTitleData", lay_type).then((res) => {});
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
}

.swiper {
  width: 100%;
  height: 600px;
  border-radius: 8px;
  position: relative;
  margin: 0 auto;

  .swiper-slide {
    background-position: center;
    background-size: cover;
    background-color: white;
    color: black;
    height: 570px;

    li {
      width: 276px;
      height: 263px;
      margin: 20px 0 0 20px;
      float: left;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .card {
      width: 100%;
      height: 100%;

      .card-img {
        width: 276px;
        height: 175px;
        overflow: hidden;

        .image {
          transition: all 1.3s;
        }

        .image:hover {
          transform: scale(1.1);
        }
      }

      .card-title {
        padding: 30px 10px 15px;
        border-right: 1px solid #ececec;
        border-left: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
        position: relative;

        .info {
          position: absolute;
          top: -30px;

          .txt {
            padding-top: 33px;
            padding-left: 10px;
            font-size: 14.5px;
          }

          span {
            float: left;

            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
            }
          }
        }

        .title-context {
          width: 256px;
          height: 43px;
          overflow: hidden;
          font-weight: 600;
        }
      }
    }

    li:hover {
      transition: box-shadow 0.5s;
      box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);

      .image {
        transform: scale(1.1);
      }

      .title-context {
        color: #2aaf55;
        transition: color 0.5s;
      }
    }
  }
}

.more {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin-top: 20px;

  .el-button {
    background-color: #fff;
    color: #3c3c3c;
    width: 220px;
    font-size: 20px;
  }

  .el-button:hover {
    box-shadow: 0px 0px 5px 0 rgb(0 0 0 / 0.5);
    border: 1px solid #f5f5f5;
  }
}

/deep/.swiper-pagination {
  bottom: 0px;
}

/deep/.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  width: 30px;
  height: 5px;
  border-radius: 0;
}

/deep/.swiper-pagination-bullet {
  background-color: #000;
}

/deep/.swiper-pagination-bullet-active {
  background-color: #2aaf55;
}
</style>